<template>
	<view>
		<form @submit="formSubmit">
			<view class="cu-form-group bottom">
				<textarea maxlength="-1" :disabled="modalName!=null" name="content" @input="textareaAInput" placeholder="输入要分享的内容"></textarea>
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/9
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-bar btn-group padding">
				<button class="cu-btn bg-green shadow-blur round lg" formType="submit">发布</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				imgList: [], //上传的图片
				modalName: null,
				textareaAValue: '', //输如的内容,
				question: {
					userid: '',
					content: '',
					picturesUrl: '', //上传后的相对路径
				},
				imgList: [], //转换后的图像地址
				tempImgSrc: '', //当前要操作的图片路径，上传或者删除
				imgindex : 0
			};
		},
		created() {

		},
		methods: {
			ChooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths);
						} else {
							this.imgList = res.tempFilePaths
						}
						if(this.imgList.length>9){
							this.imgList = this.imgList.slice(0,9)
						}
						for(let i=this.imgindex;i<this.imgList.length;i++,this.imgindex++){
							this.tempImgSrc = this.imgList[i];
							this.dealFile(1, 0, '');
						}
						
					}
				});
			},
			dealFile(isup, isdel, delPath) {
				uni.uploadFile({
					url: this.$config.apiUrl + "/appUploadController/dealFile",
					filePath: this.tempImgSrc, //当前要操作的图片路径，上传或者删除
					fileType: 'image',
					name: 'file', //后端通过'file'获取上传的文件对象
					formData: {
						isup: isup,
						isdel: isdel,
						bizType: 'photosucai',
						delPath: delPath
					},
					success: (res) => {
						// console.log(res);
						if (res.statusCode === 200) {
							let data = JSON.parse(res.data);
							let msg = data.message;
							if (isup == 1) {
								if (this.question.picturesUrl) {
									this.question.picturesUrl += ',' + data.data;
								} else {
									this.question.picturesUrl = data.data;
								}
							} else {
								//删除照片及逗号，三次匹配
								this.question.picturesUrl = this.question.picturesUrl.replace(',' + delPath, '');
								this.question.picturesUrl = this.question.picturesUrl.replace(delPath + ',', '');
								this.question.picturesUrl = this.question.picturesUrl.replace(delPath, '');
							}
							// console.log(this.question.photo);
							uni.showToast({
								title: msg,
								duration: 2000
							});
							this.tempImgSrc = "";
							console.log(this.question.picturesUrl)
						}
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除么？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							var i = e.currentTarget.dataset.index;
							this.imgList.splice(i, 1);
							this.question.picturesUrl = this.question.picturesUrl.split(',');
							this.question.picturesUrl.splice(i,1);
							this.question.picturesUrl = this.question.picturesUrl.join(',');
							console.log(this.question.picturesUrl);
						}
					}
				})
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			formSubmit(e) {
				var formData = { //把发布信息的数据合并成对象
					userId: this.$store.getters.userid,
					content: this.textareaAValue,
					picturesUrl: this.question.picturesUrl
				}
				uni.request({
					url: this.$config.apiUrl+'/dasPostController/post',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //这样设置request才能接值
					},
					data: formData,
					success: (res) => {
						var item = res;
						// console.log(item);
						setTimeout(() => { //返回社区页
							uni.$emit('reloadNssq', {msg:'刷新'});
							uni.navigateBack({
								url: './nssq'
							});
						}, 0)
					},
					fail: (res) => {
						console.log(res);
					}
				});
			}
		}
	}
</script>

<style>
	.bottom {
		border-bottom: 2rpx solid rgb(241, 241, 241);
	}
</style>
